<template>
	<div class="imageEcharts" >
		<div class="imageLabel" >
			价值评分：
			<div class="imagesoreButton" > 
				<!-- 74.54 -->
			</div>
		</div>
		<div ref="myChart" id="myChart" class="inMain" style="width: 469px;height: 300px;"></div>
	</div>
</template>

<script>
	export default {
		name: 'imageEc1',
		methods: {
			myEcharts() {
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart);
				let myColor =['#F5C338','#46BDF2 '];
				//配置图表
				if (myChart == null) {
					myChart = this.$echarts.init(this.$refs.myChart); //利用原型调取Echarts的初始化方法
				}
				const option = {
					legend: {
					    top: 25,
					    right: 10,
					    icon: 'circle',
						orient: "vertical",
					    itemWidth: 8, // 图例标记的图形宽度。[ default: 25 ]
					    itemHeight: 8, // 图例标记的图形高度。[ default: 14 ]
					    itemGap: 9, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
					    textStyle: {
					      fontSize: 16,
					      color: '#E1ECFF',
					    },
					    data: ['稀土永磁行业平均水平', '本企业的水平'],
					  },
					radar: {
						center: ["45%", "60%"],
						radius: "70%",
						axisName: {
						      fontSize: 20,
							  color: "#FFFFFF"
						},
						indicator: [{
								name: '规模实力',
								max: 100
							},
							{
								name: '盈利能力',
								max: 100
							},
							{
								name: '成长能力',
								max: 100
							},
							{
								name: '投融资能力',
								max: 100
							},
							{
								name: '创新能力',
								max: 100
							},
						],
					},

					series: [{
						name: '稀土永磁行业平均水平',
						type: 'radar',
						symbol: "circle",
						symbolSize: 7,
						areaStyle: {
							color:myColor[0],
						},
						itemStyle:{
						    borderWidth:3,
							color:myColor[0],
						},
						lineStyle: {
						    
						},
						// data:[[80, 80, 80, 60,80]]
					},
					{
						name: '本企业的水平',
						type: 'radar',
						symbol: "circle",
						symbolSize: 7,
						
						areaStyle: {
							color:myColor[1],
						},
						itemStyle:{
						    borderWidth:3,
							color:myColor[1],
						},
						lineStyle: {
						    
						},
						// data:[[70, 20, 50, 90,90]]
					}]
				};
				myChart.setOption(option); //将编写好的配置项挂载到Echarts上
				window.addEventListener("resize", function() {
					myChart.resize(); //页面大小变化后Echarts也更改大小
				});
			}
		},
		mounted() {
			this.myEcharts();
		}
	}
</script>


<style >
	.imageEcharts{
		width: 469px;
		height: 366px;
	}
	.imageLabel{
		font-size: 21px;
		display: flex;
		color: #FFFFFF;
		line-height: 40px;
	}
	.imagesoreButton{
		width: 94px;
		height: 40px;
		background: #0088FF;
		font-size: 26px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		line-height: 40px;
		color: #FFFFFF;
		text-align: center;
		border-radius: 5px;
	}
</style>
